<template>
  <view class="car">
	<canvas class="myCanvas" canvas-id="myCanvas" id="myCanvas"></canvas>
  </view>
</template>

<script>
	import { posterCanvas } from "@/utils/yd-cenvas";
	import { cs_template, hf_template, bj_template } from './const.js'
	export default {
	  name: "screen-diagram",
	  data() {
		return {
		  arr: []
		};
	  },
	  props: {
		// 屏幕数据
		screens: {
			type: Array,
			default() {
				return []
			}
		}
	  },
	  mounted() {
		this.$nextTick(() => {
			setTimeout(() => {
				this.doDrawScreen()
			}, 1000)
			
		})
	  },
	  methods: {
		initData() {
			const bg = cs_template.bg
			const msg =  cs_template.msg
			const position = cs_template.position
			// TODO根据数据修改颜色和提示
			// this.screens.forEach(item => {
				
			// })
			this.arr = [{
					...bg
				}, {
					...msg
				}, {
					...position
				}
			]
		},
		async doDrawScreen() {
			this.initData()
			await posterCanvas({
				canvasId: "myCanvas",
				arr: this.arr,
				bgColor: "#fff",
				cw: 370,
				ch: 500
			}, this);
		}
	  }
	}
</script>

<style lang="scss" scoped>
	.car {
		margin:0 auto;
	}
	.myCanvas {
		margin:0 auto;
		height: 400rpx;
	}
</style>
